<template>
	<view class="userinfo">
		<view class="form">
			<button class="avatar-wrap" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<view class="label"> 头像 </view>
				<view class="ipt">
					<img class="avatar" :src="userinfo.avatar" />
					<uni-icons class="arrow-right" type="right" size="20"></uni-icons>
				</view>
			</button>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 昵称 </view>
			<view class="nickname_right">
				<input v-model="nickname" :placeholder="userinfo.nickname" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left">姓名</view>
			<view class="nickname_right">
				<input class="uni-input" :placeholder="userinfo.name" v-model="name" maxlength="10" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left"> 性别 </view>
			<view class="nickname_right gender">
				<picker @change="examinationType" :range="examinationTypeArray" style="margin-right: 10rpx">
					<label class="">{{ examinationTypeArray[examinationTypeIndex] }}</label>
					<uni-icons class="arrow-right" color="#aaaaaa" type="right" size="17" style="margin-top: 5rpx;padding-left: 20rpx;"></uni-icons>
				</picker>
				
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left">电话</view>
			<view class="nickname_right">
				<input class="uni-input" :placeholder="userinfo.phone" v-model="phone" maxlength="11" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left">邮箱</view>
			<view class="nickname_right">
				<input class="uni-input" :placeholder="userinfo.email" v-model="email" maxlength="30" />
			</view>
		</view>
		<view class="info_nickname">
			<view class="nickname_left">学号</view>
			<view class="nickname_right">
				<input class="uni-input" :placeholder="userinfo.stu_num" v-model="stuNum" maxlength="20" />
			</view>
		</view>
		<view class="other">
			<view class="other_addres" @click="openAddressPicker">
				<view>地址</view>
				<view>{{userinfo.address}}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="btn-wrap">
			<button type="warn" class="btn" @click="saveinfo">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:'',
				userId:'',
				email: '',
				stuNum: '',
				avatar: '',
				nickname: '',
				username: '',
				avatar: '',
				name: '',
				examinationTypeArray: ['男', '女'],
				examinationTypeIndex: 0,
				examinationTypeArrayType: '',
				phone: '',
				number: 2,
				flag: false,
				userinfo: [],
			}
		},
		onPullDownRefresh() {
			this.getUserinfo()
			this.userId = uni.getStorageSync("userId");
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			}, 1200)
		},
		onLoad() {
			this.getUserinfo()
			this.userId = uni.getStorageSync("userId");
		},
		methods: {
			openAddressPicker() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.address = res.name;
						that.userinfo.address = res.name;
						uni.setStorageSync("address", res.name)
					}
				});
			},
			saveinfo: function() {
				let that = this;
				let data = {
					nickname: that.nickname,
					name: that.name,
					gender: that.examinationTypeArray[that.examinationTypeIndex],
					phone: that.phone,
					email: that.email,
					stuNum: that.stuNum,
					address: that.address
				}
				if(that.imgUrl != null && that.imgUrl != ''){ 
					data = {
						avatar: "http://s1qq2mel1.hn-bkt.clouddn.com/" + that.imgUrl,
						nickname: that.nickname,
						name: that.name,
						gender: that.examinationTypeArray[that.examinationTypeIndex],
						phone: that.phone,
						email: that.email,
						stuNum: that.stuNum,
						address: that.address
					}
				}
				that.$ajax(that.$url.updateUserInfo, "POST", data, function(resp) {
					uni.showToast({
						icon: "none",
						title: "保存成功！"
					})
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/setup/setup'
						})
					}, 500)
				})
			},
			upload_file: function(e) {
				let that = this;
				that.$ajax(that.$url.upLoad, "GET", null, function(resp) {
					let token = resp.data.result;
					let now = new Date();
					that.imgUrl = 'images/' +that.userId + "/avatar/" + e; // 图片链接，其中的 / 会自动生成一个名为images的文件夹， // 则是两个
					let self = this
					wx.uploadFile({
						filePath: e, // ctx.takePhoto拍照获取的图片链接
						url: "https://upload-z2.qiniup.com", // 七牛云地址
						name: "file",
						formData: {
							token,
							key: that.imgUrl,
							insertOnly:0,
						},
						success: (a) => {
							let res = a.data
							res = JSON.parse(res)

							if (res.code == '1') {
								const {
									data
								} = res
								self.avatar = data.url
								self.cdnUrl = getApp().globalData.cdnUrl + data.url
							}

							wx.hideLoading()
							wx.showToast({
								title: '上传成功',
								icon: 'success',
								duration: 3000
							})
						},
						fail: (res) => {
							console.log(res)
						},
					})

				})
			},
			getUserinfo() {
				let that = this;
				this.url = uni.getStorageSync('url');
				let collect = uni.getStorageSync('collect');
				this.collectNum = collect.length;
				this.$ajax(this.$url.getLoginUser, 'GET', null, function(resp) {
					that.userinfo = resp.data.result
					if (that.userinfo.gender == '男') {
						that.examinationTypeIndex = 0
					} else {
						that.examinationTypeIndex = 1
					}
				})
			},
			onChooseAvatar(res) {
				const {
					detail
				} = res
				this.upload_file(detail.avatarUrl)
				this.avatar = detail.avatarUrl
				this.userinfo.avatar = detail.avatarUrl
			},
			// 绑定输入监听事件
			onName(event) {
				const {
					detail
				} = event
				this.username = detail.value
			},
			change(e) {
				console.log('e:', e)
			},
			examinationType(e) {
				this.examinationTypeIndex = e.target.value
				this.examinationTypeArrayType = this.examinationTypeArray[this.examinationTypeIndex]
			},
			changenumber() {
				this.number = 1
				this.flag = true
			},
			onPhone(event) {
				const {
					detail
				} = event
				this.phone = detail.value
			}
		}
	}
</script>

<style lang="scss">
	.other {
		margin: 10rpx;
		height: 190rpx;
		// width: 90%;
		border-radius: 20rpx;
		background-color: #fff;

		.other_addres {
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}
	}

	button::after {
		border-top: none;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}

	.userinfo {
		font-size: 34rpx;
		font-weight: 400;
		color: #333333;
		height: 100%;
		position: relative;

		.form {
			background-color: #ffffff;
		}

		.avatar-wrap {
			border: 0;
			background-color: #ffffff;
			height: 158rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;

			.avatar {
				margin-right: 10rpx;
			}

			.ipt {
				display: flex;
				align-items: center;
			}

			img {
				width: 118rpx;
				height: 118rpx;
			}
		}

		.info_nickname {
			border-bottom: 1px solid #e9e9e9;
			height: 112rpx;
			background: #ffffff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32rpx;
			// justify-content: space-between;

			.nickname_left {}

			.nickname_right {
				input {
					text-align: right;
				}
			}

			.gender {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.btn-wrap {
			position: absolute;
			// bottom: 50rpx;
			width: 100%;
			text-align: center;

			.btn {
				width: 690rpx;
				height: 88rpx;
			}
		}
	}
</style>